<template>
<view class="address-wrap bg-white">
  <view class="address-box padding-top cu-list menu" v-if="hasData">

    <view class="cu-item" v-for="(item, index) in addressList" :key="index">
      <view class="content padding-sm" @tap="selectAddress(item)">
        <view class="text-gray text-df">
          <text class="cu-tag sm bg-orange radius margin-right-xs" v-if="item.isdefault === 1">默认</text>
          {{ item.province }}-{{ item.city }}-{{ item.area }}
        </view>
        <view class="margin-top-sm text-black text-lg">
          {{ item.address }}
        </view>
        <view class="margin-top-xs text-black text-lg">
          {{ item.truename }}  {{ item.pri_phone }}
        </view>
      </view>
      <view class="action padding-tb padding-left border-left" @tap="editAddress(item)">
        <text class="text-df">编辑</text>
      </view>
    </view>
  </view>

  <view class="no-data h100 bg-white text-xl flex align-center justify-center flex-direction" v-if="!hasData">
    <image src="/static/no_data.png" mode="aspectFit"></image>
    暂无数据
  </view>
</view>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'addressList', // 收货地址列表
  data () {
    return {
      addressList: []
    }
  },
  filters: {
    mobileToShow(value) {
      const reg = /^(\d{3})\d{4}(\d{4})$/
      return value ? value.replace(reg, "$1****$2") : '--'
    }
  },
  computed: {
    ...mapGetters([
      'orderFlowStatus'
    ]),
    hasData() {
      return this.addressList.length > 0
    }
  },
  onShow() {
    this.getAddressList()
  },
  methods: {
    getAddressList() {
      this.$api.getAddressList().then(res => {
        console.log('获取地址', res)
        if (!res) return
        const resData = res.data
        this.addressList = resData.list || []
      })
    },
    /** 点击添加新地址 */
    onNavigationBarButtonTap(obj) {
      this.gotoEditAddressPage({ id: 0 })
    },
    /** 点击地址 */
    selectAddress(item) {
      if (this.orderFlowStatus) { // 如果是在下单过程, 则跳转返回下单页面
        this.$store.commit('SET_ORDER_ADDRESS', item) // 保存选中的收货地址
        this.$Router.push({
          name: 'order-create'
        })
      }
    },
    editAddress(item) {
      console.log('编辑', item)
      this.gotoEditAddressPage(item)
    },
    gotoEditAddressPage(params) {
      this.$Router.push({
        name: 'address-edit',
        params
      })
    }
  }
}
</script>

<style lang="less">
</style>
